<template>
    <div class="w_h_100">
      <div class="inlet">报表统计 > 监管报送 > 季报 > <span class="size">个别机构情况表</span></div>
      <div class="header d_f j_c_s_b m_t_10">
        <div class="d_f">
          <h4>季度报送</h4>
          <el-dropdown @command="handleCommand">
            <span class="dropdown">
              {{ month }}
              <el-icon class="">
                <ArrowDown />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in arr" :key="index" :command="item">{{ item }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-button type="primary" :icon="Bottom" @click="downloadOut">下载</el-button>
      </div>
      <div class="report m_t_16 ">
        <div class="w_100 headTips d_f j_c_s_b">
          <div class="d_f a_i_c">
            <div class="line"></div>
            个别机构情况表
          </div>
          <div>单位：万元</div>
        </div>
        <div class="box">
            <div>说明</div> 
            <div class="m_l_5 m_t_5">1.本表统计范围为省、自治区、直辖市实收资本超过20亿元融资担保法人机构；或实收资本不足20亿元，但跨省开展业务（含融资担保业务和非融资担保业务）占总担保业务50%以上的融资担保机构。</div> 
            <div class="m_l_5 m_t_5">2.外币数据须按报告期末最后一天国家外汇管理局公布的基准汇价折合为人民币数据进行汇总。</div> 
            <div class="m_l_5 m_t_5">3.填列的金额按四舍五入保留整数。</div> 
        </div>
        <mytable :fields="fields" ref="tableRef" :values="{}" :defaultList="records" class="m_t_20" :isSelection="false"
          :isPaginationShow="false" :handle="false" :serial="false">
        <template v-slot:projectName="{row}">
            <div :style="{marginLeft:row.num*6+'px'}">{{ row.projectName }}</div>
        </template>
        </mytable>
      </div>
    </div>
  </template>
  
  <script lang='ts'>
  import { defineComponent, reactive, toRefs, onBeforeMount } from 'vue'
  import { superviseList, superviseDownload } from "../../../api/report"
  import { momentDate, momentStartOf, derivation, momentEndOf } from '../../../utils/date'
  import {compensationRecovery} from '../../../type/report'
  import { useRoute } from 'vue-router';
  import { Bottom } from '@element-plus/icons-vue'
  export default defineComponent({
    name: '',
    setup() {
      const data:compensationRecovery = reactive({
        startTime: '',
        endTime: '',
        key: '',
        month: '',
        arr: [],
        fields: [
          {
            label: '公司名称（全称）',
            prop: 'companyName',
            width: '200px',
          },
      
          {
            label: '实际控制人',
            prop: 'actualController',
            width: '100px',
          },
          {
            label: '国有/民营/外资',
            prop: 'companyType',
            width: '150px',
          },
          {
            label: '实收资本',
            prop: 'receiptsCapital',
            width: '100px',
          },
          {
            label: '净资产',
            prop: 'netAssets',
            width: '100px',
          },
          {
            label: '融资担保直保余额',
            prop: 'financingDirectBalance',
            width: '200px',
          },
          {
            label: '融资再担保余额',
            prop: 'financingAgainBalance',
            width: '200px',
          },
          {
            label: '发行债券融资担保直保余额',
            prop: 'bondDirectBalance',
            width: '200px',
          },
          {
            label: '其他融资担保直保余额',
            prop: 'otherFinancingDirectBalance',
            width: '200px',
          },
          {
            label: '非融资担保直保余额',
            prop: 'nonFinancingDirectBalance',
            width: '200px',
          },
          {
            label: '小微企业融资担保直保余额',
            prop: 'smallFinancingDirectBalance',
            width: '200px',
          },
          {
            label: '农户及新型农业经营主体融资担保直保余额',
            prop: 'farmersFinancingDirectBalance',
            width: '300px',
          },
          {
            label: '跨省开展的非融资担保直保余额',
            prop: 'spanNonFinancingDirectBalance',
            width: '250px',
          },
          {
            label: '跨省开展的融资担保直保余额',
            prop: 'spanFinancingDirectBalance',
            width: '250px',
          },
          {
            label: '其中：跨省开展的发行债券融资担保直保余额',
            prop: 'spanBondFinancingDirectBalance',
            width: '350px',
          },
          {
            label: '跨省开展的借款类融资担保直保余额',
            prop: 'spanLoanFinancingDirectBalance',
            width: '250px',
          },
          {
            label: '融资担保应收代偿余额',
            prop: 'receivableBalance',
            width: '200px',
          },
        ],
        records: [],
        value:'',
        
      })
      const route = useRoute()
      onBeforeMount(() => {
        let year = momentDate('YYYY')
      for (let i = 1; i <= 4; i++) {
        data.arr.push(year + '年' + i + '季度')

      }
        data.startTime = route.query.startTime as string
        data.endTime = route.query.endTime as string
        data.key = route.query.key as string
        data.month = route.query.month as string
        data.value=route.query.value as string
        methods.getData()
      })
  
      const methods = {
        getData() {
          superviseList({ reportSuperviseType: route.query.type as string, startTime: data.startTime, endTime: data.endTime,usci:data.value }).then((res: any) => {
            res.map((item:any)=>{
              for (let i in item) {
                            if (item[i] == '' || item[i] == null || item[i] == undefined) {
                                item[i] = '-'
                            }
                        }
            })
            data.records=res
          })
        },
        //下载全部模版
        downloadOut() {
            superviseDownload({ reportSuperviseType: route.query.type as string, startTime: data.startTime, endTime: data.endTime,usci:data.value }).then((res: any) => {
          derivation(res, '个别机构情况表')
        })
        },
        //选择月份
        handleCommand(e: number) {
          console.log(e,'aa');
            data.month = String(e)
        data.arr.map((item: string, index: number) => {
          if (item == String(e)) {
            data.key = String(index)
          }
        })
          methods.getBoundingClientRect()
        },
        //获取开始时间跟结束事件
        getBoundingClientRect() {
            let num = '1'
        let num1 = '3'
        if (data.key == '0') {
          num = '01'
          num1 = '03'
        } else if (data.key == '1') {
          num = '04'
          num1 = '06'
        } else if (data.key == '2') {
          num = '07'
          num1 = '09'
        } else if (data.key == '3') {
          num = '10'
          num1 = '12'
        }
        let year = momentDate('YYYY')
        let date = year + '-' + num
        let date1 = year + '-' + num1
        data.startTime = momentStartOf(date, 'YYYY-MM-DD')
        data.endTime = momentEndOf(date1, 'YYYY-MM-DD')
        console.log(data.startTime, data.endTime);
          methods.getData()
        },
      }
      return {
        ...toRefs(data),
        ...methods,Bottom
      }
    }
  })
  </script>
  <style scoped lang='scss'>
  .header {
    width: calc(100% - 64px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    height: 20px;
    padding: 24px 32px;
  
    .dropdown {
      color: #1878FF;
      font-size: 16px;
      font-weight: bold;
      margin-left: 24px;
    }
  }
  
  .report {
    overflow-y: auto;
    width: calc(100% - 64px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    height: calc(100% - 164px);
    padding: 20px 32px;
  }
  .box{
    background: rgba(24, 120, 255, 0.03);
    width: calc(100% - 40px);
    padding:20px;
    margin-top:20px;
    color: #86909C;
    font-size:12px;
  }
  </style>